import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxWorkerAverageSalaryBarChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxWorkerAverageSalaryBarChartOption = ({
  dataSource = [],
  unitName = "元",
}: KxWorkerAverageSalaryBarChart): EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      show: true,
    },

    grid: {
      left: "5%",
      top: "22%",
      bottom: "15%",
      right: "5%",
    },
    xAxis: {
      type: "category",

      data: dataSource.map((d) => d.name || ""),
      axisLine: {
        show: false,
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.2,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        fontSize: 14,
        color: "#FDFFFF",
        margin: 19,

        width: 65,
        align: "center",
        interval: 0,
        overflow: "truncate",
      },
    },
    yAxis: [
      {
        name: unitName,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },

        axisLabel: {
          fontSize: 12,
          fontFamily: "Arial",
          color: "#FDFFFF",
          opacity: 0.8,
          formatter: "{value}",
        },
      },
    ],

    series: [
      {
        name: "薪资",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#02EABC" },
            { offset: 1, color: "#3E62FF" },
          ]),
        },
        data: dataSource.map((d) => d.amount || 0),
      },

      {
        name: "计划",
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: "#324384",
        },
        z: -12,
      },
    ],
  };
};

const KxWorkerAverageSalaryBarChart = ({
  reactEChartsProps,
  dataSource,
  height = "319px",
  unitName = "元",
}: KxWorkerAverageSalaryBarChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: height,
      }}
      option={getKxWorkerAverageSalaryBarChartOption({
        dataSource,
        unitName,
      })}
    />
  );
};

export default KxWorkerAverageSalaryBarChart;
